import React, { Component } from 'react'

import store from './store/index'

import axios from 'axios'

export default class App extends Component {

  componentDidMount(){
    // fetch 是 js 里面的请求方法
    // res.json() 做数据解析
    // 后面的 res 才是解析之后的数据
    fetch('http://121.89.205.189:3000/api/banner/list').then(res => res.json()).then(res => {
      // console.log(res.data);
      store.dispatch({type: 'change_banner_list',payload: res.data})
    })

    axios('http://121.89.205.189:3000/api/pro/list').then(res => {
      console.log(res.data.data);
      store.dispatch({type: 'change_pro_list',payload: res.data.data})
    })
  }


  render() {

    // console.log(store.getState());
    return (
      <div>
        {/* 如果使用了状态模块，那么用数据的时候需要先点一个模块名 */}
        <h1>App --- {store.getState().app.count}</h1>
        <button onClick={()=>{
          store.dispatch({type: 'add'})
        }}>加一</button>
        <button onClick={()=>{
          store.dispatch({type: 'reduce'})
        }}>减一</button>
        <button onClick={()=>{
          store.dispatch({type: 'addNum', payload: 6})
        }}>加指定数</button>
        <button onClick={()=>{
          store.dispatch({type: 'reduceNum', payload: 10})
        }}>减指定数</button>


        <hr />

        {
          store.getState().pro.bannerList &&
          store.getState().pro.bannerList.map(item => {
            return (<img style={{width: 150}} src={item.img} key={item.bannerid} />)
          })
        }

        <hr />

        {
          store.getState().pro.proList.length && 
          store.getState().pro.proList.map(item => {
            return (<p key={item.proid}>{item.proname}</p>)
          })
        }

      </div>
    )
  }
}
